<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2021/3/25
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->

<template>
  <el-container style="padding: 0 30px;">
    <p class="comm-title-withang"><i class="el-icon-caret-right"></i>室外消火栓列表</p>
    <el-row style="margin-top: 20px;">
      <el-table :data="alrmtableData" v-loading.body="alamLoading" style="width: 100%">
        <el-table-column label="消火栓名称">
          <template slot-scope="scope">
            <span>{{scope.row.hydrantName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="地址">
          <template slot-scope="scope">
            <span>{{scope.row.address}}</span>
          </template>
        </el-table-column>
        <el-table-column label="出水口">
          <template slot-scope="scope">
            <span>{{scope.row.outlet}}</span>
          </template>
        </el-table-column>
        <el-table-column label="实时监测">
          <template slot-scope="scope">
            <p
              v-for="(msp,index) in scope.row.measuringPointList"
              :key="index" v-if="scope.row.measuringPointList.length>=1" class="mesuring-content">{{msp.measuringPoint}}<span class="mesuring-splite">{{msp.data}}</span><span :class="'status'+msp.status">
              {{msp.state}}
            </span></p>
            <p v-if="scope.row.measuringPointList.length<=0">暂无数据</p>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-footer>
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryList.page" :page-sizes="[10,15,30,40]" :page-size="queryList.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-footer>
  </el-container>
</template>
<script>
  import { hydrantAlllist } from "@/api/datahandler/deviceAbnormal/index";
  export default {
    props: {
      loadData: {
        required: true,
        default: false
      }
    },
    data() {
      return {
        alrmtableData: [],
        alamLoading: false,
        total:0,
        queryList: {
          page: 1,
          limit: 15
        },
      };
    },
    methods: {
      getAllData() {
        this.alamLoading = true;
        hydrantAlllist(this.queryList)
          .then(res => {
            this.alrmtableData = res.data.rows;
            this.total = res.data.total;
            this.alamLoading = false;
          })
          .catch(() => {
            this.alamLoading = false;
          });
      },
      handleSizeChange(val) {
        this.queryList.limit = val;
        this.getAllData();
      },
      handleCurrentChange(val) {
        this.queryList.page = val;
        this.getAllData();
      },
      viewimg(id) {
        this.$emit("showSensor", id);
      }
    },
    watch: {
      loadData(val) {
        let self = this;
        if (val) {
          this.$nextTick(() => {
            self.getAllData();
          });
        } else {
          this.alamLoading = false;
          this.$nextTick(() => {
            self.alamLoading = false;
          });
        }
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss">
  .el-table th {
    background: #f5f7fa;
  }
  .mesuring-content{
    margin: 0;
    .mesuring-splite{
      display: inline-block;
      min-width: 100px;
      padding-left: 20px;
    }
    .status0{
      color: #F5A623;
    }
    .status1{
      color: #FF001F;
    }
    .status2{
      color: #4F9600;
    }
  }
</style>
